]
<template>
  <tm-drawer placement="bottom" :show="drawerShow" title="地址选择器" :okText=" okText " :before-ok="onSubmit">

    <tm-result v-if="EmptyUtil.isEmptyArray(dataList)" btn-text="去添加" @click="EditCtr.Open()" subTitle="收货地址空空如也 赶快添加一个吧!" title=" "/>

    <tm-radio-group v-else v-model="selected">
      <view class="main">
        <view class="item" v-for="(item) in dataList" :key="item.id">
          <view class="left">
            <tm-radio :value="item.id"></tm-radio>
          </view>
          <view class="right">
            <view class="header">
              <view class="info">夏绪秋 (19983294283)</view>
            </view>
            <view class="address">
              提供实时、快速、准确的的EMS快递单号查询、ems网点分布查询、EMS快递电话查 …
            </view>
          </view>
        </view>

      </view>
    </tm-radio-group>


  </tm-drawer>

  <AddressWindow v-if="EditCtr.Show" :Record="EditCtr.Record" @Close="EditCtr.Close"/>
</template>

<script lang="ts" setup>
import {computed, reactive, ref} from 'vue';
import {getAllAddress} from "@/apis";
import AddressWindow from '@/components/address-edit/index.vue';
import {EmptyUtil} from "@/utils";


const emit = defineEmits(['close']);
const drawerShow = ref(true)
const selected = ref(null);
const dataList = ref([])

const okText = computed(() => EmptyUtil.isEmptyArray(dataList.value) ? '' : '确定')

const getData = async () => {
  const {data} = await getAllAddress()
  dataList.value = data
}

getData()

const onClose = (data: boolean | object) => {
  emit('close', data)
}
const onSubmit = () => {
  if (EmptyUtil.isEmptyString(selected.value)) {
    onClose(false)
    return
  }
  const res = dataList.value.find(x => x.id === selected.value)

  if (res !== undefined) {
    onClose({...res})
  } else {
    onClose(false)
  }

}


const EditCtr = reactive({
  Show: false,
  Record: {},
  Open: (data = {}) => {
    EditCtr.Show = true;
    EditCtr.Record = data;
    drawerShow.value = false
  },
  Close: (e: any) => {
    EditCtr.Show = false;
    if (typeof e === 'object') getData()
    drawerShow.value = true
  }
});

</script>


<style lang="less" scoped>

.main {

  height: 300px;
  width: 100%;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;

  .item {

    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;

    .left {
      align-items: center;
      display: flex;
      width: 80rpx;
    }

    .right {
      flex: 1;

      .header {
        padding: 24rpx;

        display: flex;
        justify-content: space-between;
        line-height: 40rpx;

        .info {

          font-weight: 600;

        }

        .btn-box {
          font-size: 26rpx;
          color: blue;
          width: 120rpx;
          text-align: left;
        }
      }

      .address {
        width: 100%;
        font-size: 13px;
        color: #999999;
        box-sizing: border-box;
        line-height: 2;
        padding: 6rpx 24rpx;
        border-bottom: 1px solid #eeeeee;
        margin-top: -24rpx;
      }
    }
  }

}
</style>